<template>
	<view class="content">
		<image mode="widthFix" class="banner" src="/static/banner.png" alt="" />
		<view class="search d-f j-b">
			<view class="d-f f16">
				<image class="sosuo" src="/static/sosuo.png" alt="" />
				<input @confirm="input_box" v-model="keyword" type="text" placeholder="搜索公司/职位" />
			</view>
			<view class="filters d-f" @click="toggle('right')">
				<image class="filter" src="/static/filter.png" alt="" />
				<text>筛选</text>
			</view>
		</view>
		<view class="list">
			<view class="t-c null" v-if="job_list.length <= 0">
				<image src="/static/null.png" mode="widthFix"></image>
				暂无内容
			</view>
			<view class="list_item" v-for="item in job_list" @click="details(item.id)">
				<view class=" d-f j-b">
					<view class="c1a f16 f-w d-f">
						{{item.title}} <text class="f12 cfd labels">{{item.jsfs}}</text>
					</view>
					<view class="f16 cfd f-w">
						{{item.xzfw}}
					</view>
				</view>
				<view v-if="item.gzfl" class="c76 f12 label_list">
					<label v-for="items in item.gzfl" class="lable">{{items}}</label>
				</view>
				<view class="c76 f12 d-f j-b publisher">
					<view class=" d-f">
						<image class="filter" src="/static/filter.png" alt="" />
						<view style="width: 80%;">{{item.ygdw}}</view>
					</view>
					<view style="width: 120px;text-align: right;">
						{{item.area_name}}
					</view>
				</view>
				<view class="d-f j-b but f-w">
					<view class="c1a f14">
						招聘人数：{{item.gwrs}}人
					</view>
					<view class="cff f14 t-c">
						报名
					</view>
				</view>
			</view>
			<view class="text_content f16 cc9" v-if="text">我也是有底线的~</view>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content p-r" >
				<view class="title c3d f14">
					结算方式
				</view>
				<uni-data-checkbox mode="tag" :map="{text:'label',value:'value'}" v-model="checkbox2" :localdata="hobby"></uni-data-checkbox>
				<view class="title c3d f14">
					工作福利
				</view>
				<uni-data-checkbox mode="tag" :map="{text:'label',value:'value'}" multiple v-model="gzfls" :localdata="gzfl"></uni-data-checkbox>
			</view>
			<view class="p-a buts d-f j-a">
				<view class="c33 f16" @click="resets">
					重置
				</view>
				<view class="cff f16" @click="joblist">
					确定
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import unis from '@/utils/util.js'
	export default {
		data() {
			return {
				type: 'right',
				hobby: [],
				checkbox2:'',
				gzfl:[],
				gzfls:[],
				page:1,
				page_size:10,
				keyword:'',
				job_list:[],
				lastPage:0,
				text:false,
				pull_down:false
			}
		},
		onLoad() {
			var that = this
			unis.getData('/api/job/getdata', 'get', {
				
			}, function (res) {
				if(res.code == 200){
					that.hobby = res.data.jsfs
					that.gzfl = res.data.gzfl
				}
			});
			that.lists()
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			console.log("用户触发了下拉刷新");
			this.pull_down = true
			this.resets()
		},
		methods: {
			details(e){
				if(!uni.getStorageSync('token')){
					uni.showModal({
					    title: '未登录',
					    content: '是否立即登录？',
						itemList: ['取消', '确定'],
					    success: function (res) {
					      if (res.confirm) {
							uni.reLaunch({
								url: '/pages/index/index',
							})
					      } else {
					      	  console.log('点击了取消按钮')
					      }
					    }
					});
					return false
				}				
				uni.navigateTo({
					url:'/pages/details/details?id='+e
				})
			},
			// 重置
			resets(){
				this.page = 1
				this.checkbox2 = ''
				this.gzfls = []
				this.keyword = ''
				this.lists()
			},
			input_box(){
				this.page = 1
				this.lists()
			},
			lists(){
				var that = this
				unis.getData('/api/job/list', 'POST', {
					page:that.page,
					page_size:that.page_size,
					jsfs:that.checkbox2,
					gzfl:that.gzfls,
					keyword:that.keyword,
				}, function (res) {
					if(that.pull_down){
						setTimeout(() => {
							uni.showToast({
							  title: "刷新成功",
							  icon: "none",
							  duration: 1000
							});
							uni.stopPullDownRefresh()
						}, 1000)
					}
					if(res.code == 200){
						console.log(res.data.total,that.page_size)
						that.last_page = Math.ceil(res.data.total / that.page_size)
						if (that.page == 1) {
							that.job_list = res.data.list,
							that.text = false
						} else {
							that.job_list = that.job_list.concat(res.data.list),
							that.text = false
						}
					}
				});
			},
			joblist(){
				var that = this
				that.$refs.popup.close()
				that.lists()
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			 loadMoreData(e) {
				 console.log('触底了')
			  }
		},
		onReachBottom(){
			console.log('触底了',this.page,this.last_page)
			
			if (this.page >= this.last_page) {
				this.text = true
			  return false
			}
			this.page++
			this.lists()
		},
	}
</script>

<style lang="scss" scoped>
.content{
	background: #F9FAFB;
	height: 100%;
}
.banner{
	width: 100%;
}
.search{
	position: relative;
	top: -22.5px;
	width: 688rpx;
	height: 90rpx;
	background: #FFFFFF;
	box-shadow: 0px 2rpx 5rpx 0px rgba(185,185,185,0.3);
	border-radius: 4px 4px 4px 4px;
	margin-left: 36rpx;
	.sosuo{
		width: 30rpx;
		height: 30rpx;
		padding:0 16rpx 0 30rpx ;
	}
	.filter{
		width:29rpx;
		height: 26rpx;
		padding-right: 11rpx;
	}
	.filters{
		padding:0 30rpx 0 22rpx;
		border-left: 1px solid #D8D8D8;
	}
}
.list{
	margin-top: -20px;
}
.list_item{
	margin: 10px 16px 15px 16px;
	box-shadow: 0px 1rpx 45rpx 0px rgba(185, 185, 185, 0.6);
	padding: 13px 17px;
	background: #FFFFFF;
	border-radius: 4px 4px 4px 4px;
	.labels{
		background: rgba(253,75,55,0.1);
		padding: 2px 5px;
		margin-left: 4px;
	}
	.label_list{
		margin-top: 9px;
		.lable{
			padding: 2px 4px;
			background: #F0F0F0;
			border-radius: 4px 4px 4px 4px;
			margin-right: 5px;
		}
	}
	.publisher{
		margin-top: 13px;
		.filter{
			width: 13px;
			height: 13px;
			margin-right: 3px;
		}
	}
	.but{
		border-top: 1px solid #D8D8D8;
		margin-top: 11px;
		padding-top: 9px;
		.cff{
			width: 54px;
			height: 24px;
			background: #2D73FF;
			border-radius: 4px 4px 4px 4px;
			line-height: 24px;
		}
	}
}
.popup{
	width: 303px;
	height: 100vh;
	background: #FFFFFF;
}
.popup-content{
	width: 253px;
	height: 100vh;
	padding: 27px 17px 0 17px;
}
.buts{
	bottom: 50px;
	left: 50%;
	transform: translate(-50%,0%);
	.c33{
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #999999;
		width: 100px;
		height: 28px;
		text-align: center;
		line-height: 28px;
	}
	.cff{
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #2D73FF;
		width: 100px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		background: #2D73FF;
		margin-left: 7px;
	}
}
.title{
	margin: 10px 0;
}
</style>
